<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->
<div xmlns="http://www.w3.org/1999/html" tab-scroll>
<!--<div ng-show="user.id">
    <h2 id="editUserLabel" openlmis-message="edit.user.label"></h2>
</div>-->

<form ng-submit="saveUser()" id="create-user" name="userForm" novalidate>
<div class="app-form">
    <div class="row-fluid">
        <div class="span6">
            <div class="form-group">
                <h3 openlmis-message="label.basicInformation"></h3>

                <div class="form-row clearfix">
                    <div class="form-cell">
                        <label for="firstName" openlmis-message="create.user.firstName"><span class="label-required">
                         *</span></label>

                        <div class="form-field">
                            <input ng-model="user.firstName" name="firstName" id="firstName" type="text" maxlength="50"
                                   ng-required="true"/>
                            <span class="field-error" ng-show="userForm.firstName.$error.required && showError"
                                  openlmis-message="missing.value">
                            </span>
                        </div>
                    </div>


                    <div class="form-cell">
                        <label for="lastName" openlmis-message="create.user.lastName"><span class="label-required"> *</span></label>

                        <div class="form-field">
                            <input ng-model="user.lastName" name="lastName" id="lastName" type="text" maxlength="50"
                                   ng-required="true"/>
                            <span class="field-error" ng-show="userForm.lastName.$error.required && showError"
                                  openlmis-message="missing.value">
                            </span>
                        </div>
                    </div>
                </div>

                <div class="form-row clearfix">
                    <div class="form-cell">
                        <label for="email" openlmis-message="create.user.email"><span class="label-required"> *</span></label>

                        <div class="form-field">
                            <input ng-model="user.email" name="email" id="email" type="text" maxlength="50" ng-required="true"/>
                            <span class="field-error" ng-show="userForm.email.$error.required && showError"
                                  openlmis-message="missing.value">
                            </span>
                        </div>
                    </div>
                    <div class="form-cell">
                        <label for="jobTitle" openlmis-message="create.user.jobTitle"> </label>

                        <div class="form-field">
                            <input ng-model="user.jobTitle" id="jobTitle" type="text" maxlength="50"/>
                        </div>
                    </div>
                </div>

                <div class="form-row clearfix">
                    <div class="form-cell">
                        <label for="officePhone" openlmis-message="create.user.officePhone"> </label>

                        <div class="form-field">
                            <input ng-model="user.officePhone" id="officePhone" type="text" maxlength="30"/>
                        </div>
                    </div>


                    <div class="form-cell">
                        <label for="cellPhone" openlmis-message="create.user.cellPhone"> </label>

                        <div class="form-field">
                            <input ng-model="user.cellPhone" id="cellPhone" type="text" maxlength="30"/>
                        </div>
                    </div>
                </div>

            </div>
            <div class="form-group" ng-show="hasPermission('ACCESS_NEW_DASHBOARD')">
                <h3 openlmis-message="label.dashboard.preference"></h3>

                <div class="form-row clearfix">
                    <div class="form-cell">
                        <label class="labels" openlmis-message="label.program"></label>
                        <div class="form-fields">
                            <select ui-select2 style="width:240px;" class="large-input" name="program"  ng-model="preference.program" ng-change="filterProductsByProgram()">
                                <option ng-repeat="option in programs" value="{{option.id}}">{{option.name}}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-row clearfix">
                    <div class="form-cell">
                        <label class="labels" openlmis-message="label.facility"></label>

                        <div class="form-field">
                            <select ui-select2 id="facility-name" style="width:240px;" name="facility" ng-model="preference.facility"  required="true">
                                <option  ng-repeat="option in allFacilities" value="{{ option.id }}">{{ option.code }} - {{ option.name }}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-row clearfix">
                    <div class="form-cell">
                        <label class="labels" openlmis-message="label.product"><span class="label-required">*</span></label>

                        <div class="form-field">
                            <select ui-select2="productSelectOption" style="width:240px;" name="product" class="input-sm"  ng-model="preference.products" ng-change="processProductsFilter()" openlmis-message="placeholder.select.product"
                                    multiple="multiple" >
                                <option  ng-repeat="option in products" value="{{ option.id }}">{{ option.name }}</option>
                            </select>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="span6">
            <div class="form-group">
                <h3 openlmis-message="label.current.role"></h3>
                <table class="table table-striped table-bordered" ng-show="user.supervisorRoles == undefined || user.supervisorRoles.length == 0">
                    <thead>
                    <tr  class="gradient-header">
                        <th>Program</th>
                        <th>Supervisory Node</th>
                        <th>Role</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td colspan="3">No Supervisory Node assigned</td>
                    </tr>
                    </tbody>
                </table>
                <div style="background-color: #ffffff;" ng-show="user.supervisorRoles.length > 0">
                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr  class="gradient-header">
                            <th>Program</th>
                            <th>Supervisory Node</th>
                            <th>Role</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="roleAssignment in user.supervisorRoles">
                            <td>{{getProgramName(roleAssignment.programId)}}</td>
                            <td>{{getSupervisoryNodeName(roleAssignment.supervisoryNode.id)}}</td>
                            <td>
                                <!--<ul style="list-style: none">
                                    <li ng-repeat="roleId in roleAssignment.roleIds">{{getRoleName(roleId)}}</li>
                                </ul>-->
                                <table class="table table-striped table-bordered" style="margin: 0px;">
                                    <tr ng-repeat="roleId in roleAssignment.roleIds">
                                        <td>{{getRoleName(roleId)}}</td>
                                    </tr>
                                </table>
                            </td>

                        </tr>
                        </tbody>
                    </table>

                    <div class="clearfix"></div>
                </div>

            </div>

           <!-- <div class="form-group">
                <div ng-repeat="roleAssignment in user.supervisorRoles" tab-scroll>
                   &lt;!&ndash; <div class="span3">
                        <div class="fluid-grid-cell">
                            <label ng-bind="getProgramName(roleAssignment.programId)"></label>
                        </div>
                    </div>&ndash;&gt;
                    <div>
                        <div class="fluid-grid-cell">
                            <label ng-bind="getSupervisoryNodeName(roleAssignment.supervisoryNode.id)"></label>
                        </div>
                    </div>
                   &lt;!&ndash; <div class="span4">
                        <div class="fluid-grid-cell">
                            <select ui-select2 ng-model="roleAssignment.roleIds" openlmis-message="placeholder.add.role"
                                    multiple="multiple" name="roles" id="roles"
                                    ng-options="role.id as role.name for role in rolesMap.REQUISITION">
                            </select>
        <span ng-show="roleAssignment.roleIds.length == 0" class="field-error" openlmis-message="missing.value">
        </span>
                        </div>
                    </div>&ndash;&gt;
                </div>

            </div>-->

        </div>
    </div>

<div form-toolbar id="action_buttons" class="action-buttons">
    <div class="form-cell button-row">
        <input id="userSaveButton" type="submit" class="btn btn-primary save-button" openlmis-message="button.save"/>
    </div>
    <div class="toolbar-error" id="saveErrorMsgDiv" openlmis-message="error" ng-show="error"/>
    <div class="toolbar-success" id="saveSuccessMsgDiv" openlmis-message="message" ng-show="message"/>
</div>

</div>
</form>
</div>


